<template>
  <div class="movie-details" v-if="info">
    <van-nav-bar title="详情" fixed placeholder @click-left="onClickLeft">
      <template #left
        ><van-icon name="arrow-left" color="#323233" size="1.5rem"
      /></template>
    </van-nav-bar>

    <van-row class="movie-info" type="flex">
      <van-col span="7" class="movie-info-l">
        <van-image
          :src="baseURL + info.data.poster"
          fit="contain"
          radius="1.4vw"
        ></van-image>
      </van-col>
      <van-col span="17" class="movie-info-r">
        <div class="title">{{ info.data.name }}</div>
        <div>{{ info.data.type }}</div>
        <div>
          {{ new Date(info.data.publicDate).toLocaleDateString() }} - 片长{{
            info.data.movieLong
          }}
        </div>
        <div>评分</div>
        <div>
          <rate-readonly :score="info.data.score" size="4.3vw"></rate-readonly>
        </div>
      </van-col>
    </van-row>

    <!-- 简介  -->
    <div v-if="info" class="movie-intro van-multi-ellipsis--l3" ref="intro">
      <div class="intro-title">影片简介</div>
      <div class="intro-text" @click="openText()">
        {{ info.data.intro }}
        <div class="open" v-show="!open">{{ open ? "收起" : "展开" }}</div>
      </div>
    </div>
    <div class="btn">
      <!-- <button class="mybtn">想看</button> -->
      <van-button
        round
        type="info"
        size="small"
        color="rgb(231, 192, 163)"
        border-radius-sm
        @click="collect"
        v-if="btnChange == 1"
        >想看</van-button
      >
      <van-button
        v-if="btnChange == 0"
        disabled
        round
        type="info"
        size="small"
        color="rgb(231, 192, 163)"
        border-radius-sm
        >已想看</van-button
      >
    </div>
    <!-- 演员表 -->
    <div class="movie-actor">
      <div class="actor-title">演职人员</div>
      <div class="actor-list">
        <div class="list-item" v-for="item in actors" :key="item">
          <van-image
            width="21vw"
            height="28vw"
            fit="cover"
            :src="`http://10.36.4.254:8080${item}`"
            radius="1.5vw"
          />
          <div>{{item.slice(9,-4)}}</div>
        </div>
      </div>
    </div>

    <!-- 这里是评论区 -->
    <div class="movie-comments">
      <div class="comments-title">观众点评</div>
      <!-- <list-comment-item></list-comment-item> -->
      <template v-if="info.mdv">
        <list-comment-item
          v-for="(commentData, index) in info.mdv"
          :key="index"
          :commentData="commentData"
        ></list-comment-item>
      </template>
    </div>
  </div>
</template>

<script>
import RateReadonly from "../components/RateReadonly.vue";
import { Toast } from "vant";
import ListCommentItem from "../components/ListCommentItem.vue";
export default {
  components: {
    RateReadonly,
    ListCommentItem,
  },
  props: ["id"],
  data() {
    return {
      baseURL: "http://10.36.4.254:8080/",
      info: null,
      open: false,
      btnChange: 1,
      userID: this.$store.state.userId,
      actors:null
    };
  },
  methods: {
    collect() {
      if (this.userID) {
        this.btnChange = 0;
        this.axios
          .get(`/select/addWishMovie?movieId=${this.id}&userId=${this.userID}`)
          .then((res) => {
            console.log("想看", res);
          });
      }
    },
    onClickLeft() {
      //返回上一页
      this.$router.go(-1);
    },
    //展开描述文字区域
    openText() {
      if (this.open) {
        this.open = false;
      } else {
        this.open = true;
      }
      this.$refs.intro.classList.toggle("van-multi-ellipsis--l3");
    },
  },
  beforeMount() {
    //获取到数据前显示加载中
    const t1 = Toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
      forbidClick: true,
      closeOnClick: true,
    });
    //获取数据
    let url = "http://10.36.4.254:8080/select/FilmInfoById?id=" + this.id;
    this.axios
      .get(url)
      .then((res) => {
        this.info = res.data;
        this.actors = (res.data.data.aposter).split("、")
        console.log("shuzu",this.actors)
        console.log("movieItem接受的电影数据：");
        console.log("延元",res);
        // 加载成功隐藏加载提示(清除toast)
        t1.clear();
      })
      .catch((err) => {
        Toast.fail("加载失败");
        console.log(err);
      });
  },
  //注意!!!如果ref绑定了配合v-if/for/show指令的dom元素 在beforeMount和mounted阶段是找不到$refs.xxx的！！！
  // updated() {
  //   console.log(this.$refs.intro);
  // },
};
</script>

<style lang="scss" scoped>
.movie-details {
  background-color: #252730;
}
.btn {
  // float: right;
  text-align: right;
  margin-right: 1rem;
}
.movie-info {
  margin-top: 0.6rem;
  padding: 0 4.1vw;
  margin-bottom: 5.8vw;
  > .movie-info-r {
    font-size: 3.38vw;
    padding-left: 2.5vw;
    display: flex;
    flex-flow: column nowrap;
    > div:not(:first-child) {
      color: #d3d4d6;
      margin-top: 3vw;
    }
    > .title {
      color: #fff;
      font-size: 4.34vw;
      font-weight: 700;
    }
  }
}

.movie-intro {
  width: 100%;
  padding: 0 4.1vw;
  box-sizing: border-box;
  margin-bottom: 7vw;
  //影片简介 这四个字的样式
  .intro-title {
    color: #fff;
    font-size: 4.3vw;
    font-weight: 600;
    margin-left: 1.4vw;
    margin-bottom: 3.6vw;
  }
  //介绍文字
  > .intro-text {
    position: relative;
    color: hsla(0, 0%, 100%, 0.6);
    font-size: 3.38vw;
    line-height: 4.3vw;
    // margin-bottom: 3.86vw;
    > .open {
      position: absolute;
      color: hsla(0, 0%, 100%, 0.872);
      // 左侧阴影
      background: linear-gradient(
        90deg,
        rgba(37, 39, 48, 0) 0%,
        rgb(37, 39, 48) 66%,
        rgb(37, 39, 48) 100%
      );
      padding-left: 12vw;
      right: 0;
      bottom: 0;
    }
  }
}

.movie-actor {
  width: 100%;
  margin-bottom: 4.3vw;
  box-sizing: border-box;
  margin-bottom: 3.6vw;
  padding: 0 4.1vw;
  > .actor-title {
    font-size: 4.3vw;
    color: #fff;
    font-weight: 700;
    margin-bottom: 3.6vw;
  }
  > .actor-list {
    display: flex;
    flex-flow: row nowrap;
    overflow: auto hidden;
    > .list-item:not(:first-child) {
      margin-left: 1.9vw;
    }
    > .list-item {
      div {
        text-align: center;
        color: #fff;
        font-size: 3.38vw;
      }
    }
  }
}
.movie-comments {
  padding: 0 4.1vw;
  .comments-title {
    color: #fff;
    font-size: 4.3vw;
    font-weight: 700;
  }
}
::-webkit-scrollbar {
  width: 0;
  height: 0;
}
</style>
<style>
/* 电影详情页上方导航栏中央字体样式 修改该样式时style不能加scoped属性 否则失效*/
.movie-details .van-nav-bar__title {
  font-size: 1rem;
  font-weight: 700;
}
.van-button--round {
  border-radius: 5px;
}
.van-button--small {
  width: 6rem;
}
</style>
